<template>
  <div class="china-wrap">
    <div class="map-container" id="china2" ref="china2" style="height:100%;width:100%,border: 1px solid #EAEAEB">
    </div>
  </div>
</template>

<script>
import chinaJson from "@/utils/map/china_2.json"; // json数据引入
import liaoningJson from "@/utils/map/liaoning.json"; // json辽宁省地图数据引入
import themeJson from "@/utils/theme/theme.json"; // json数据引入

export default {
  // 组件名称
  name: "china2",
  components: {
    // mytheme,
  },
  // 组件状态值
  data() {
    return {
      mapChart: "",
      airData: [],
      seriesAirData: [
        { name: "北京", value: 39.92 },
        { name: "天津", value: 39.13 },
        { name: "上海", value: 31.22 },
        { name: "重庆", value: 66 },
        { name: "河北", value: 147 },
        { name: "河南", value: 113 },
        { name: "云南", value: 25.04 },
        { name: "辽宁", value: 50 },
        { name: "黑龙江", value: 114 },
        { name: "湖南", value: 175 },
        { name: "安徽", value: 117 },
        { name: "山东", value: 92 },
        { name: "新疆", value: 84 },
        { name: "江苏", value: 67 },
        { name: "浙江", value: 84 },
        { name: "江西", value: 96 },
        { name: "湖北", value: 273 },
        { name: "广西", value: 59 },
        { name: "甘肃", value: 99 },
        { name: "山西", value: 39 },
        { name: "内蒙古", value: 58 },
        { name: "陕西", value: 61 },
        { name: "吉林", value: 51 },
        { name: "福建", value: 29 },
        { name: "贵州", value: 71 },
        { name: "广东", value: 38 },
        { name: "青海", value: 57 },
        { name: "西藏", value: 24 },
        { name: "四川", value: 58 },
        { name: "宁夏", value: 52 },
        { name: "海南", value: 54 },
        { name: "台湾", value: 88 },
        { name: "香港", value: 66 },
        { name: "澳门", value: 77 },
        { name: "南海诸岛", value: 55 },
      ],
      option: {
        geo: {
          type: "map",
          map: "chinaMap", // chinaMap需要和registerMap中的第一个参数保持一致
          roam: true, // 设置允许缩放以及拖动的效果
          label: {
            show: true, // 展示标签
          },
        },
        series: [
          {
            data: this.seriesAirData,
            geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
            type: "map",
            center: [108.94, 34.46], // 设置地图中心点的坐标
          },
        ],
        // 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）
        visualMap: {
          min: 0,
          max: 300, // 数据来源 来自 seriesAirData 数组中的value值
          inRange: {
            // 定义 在选中范围中 的视觉元素
            color: ["#558BEE", "#01215C"], // 控制颜色渐变的范围
          },
          calculable: true, // 出现滑块
        },
      },
    };
  },
  mounted() {
    // 把data中的数据 动态给 serise
    this.option.series[0].data = this.seriesAirData;
    this.$echart.registerMap("chinaMap", chinaJson);
    this.$echart.registerTheme("themeJson", themeJson);
    this.mapChart = this.$echart.init(
      document.getElementById("china2"),
      "themeJson"
    );
    this.getLineChart();
  },
  methods: {
    getLineChart() {
      this.mapChart.setOption(this.option);
      // 点击事件
      this.mapChart.on("click", (params) => {
        console.log(params.name);
        this.$echart.registerMap("liaoningMap", liaoningJson);
        this.option.geo.map = "liaoningMap";
        this.mapChart.setOption(this.option);
      });
      // geo
      this.mapChart.getZr().on("click", (event) => {
        console.log("以外的点击事件 = ", event.target);
        if (event.target === undefined) {
          this.$echart.registerMap("chinaMap", chinaJson);
          this.option.geo.map = "chinaMap";
          this.mapChart.setOption(this.option);
        }
      });
    },
  },
};
</script> 

<style lang="less" scoped>
.china-wrap {
  width: 100%;
  height: 100%;
}
</style>